const option = {
  container: 'container', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
  width: 800, // Number，必须，图的宽度
  height: 500, // Number，必须，图的高度
  model: 'edit',
  defaultNode: {
    type: 'rect', // 在数据中已经指定了 type，这里无需再次指定
    style: {
      fill: '#bae637',
      stroke: '#eaff8f',
      lineWidth: 5,
      radius: 10
    },
    linkPoints: {
      top: true,
      bottom: true,
      left: true,
      right: true
      // ... 四个圆的样式可以在这里指定
    }
  },
  defaultEdge: {
    type: 'line', // 在数据中已经指定了 type，这里无需再次指定
    style: {
      stroke: 'steelblue',
      lineWidth: 2
    },
    labelCfg: {
      position: 'center',
      autoRotate: true,
      refY: 10,
      refX: 0
    }
  },

  modes: {
    default: [{
      type: 'drag-canvas', // 拖拽画布；
      direction: 'both' // 允许拖拽方向，支持'x'，'y'，'both'，默认方向为 'both'。
    }, {
      type: 'zoom-canvas', // 缩放画布；
      // minZoom: 10, // 最小缩放比例；
      // maxZoom: 0.2, // 最大缩放比例；
      sensitivity: 5, // 缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5；
      enableOptimize: false, // 是否开启性能优化，默认为 false，设置为 true 开启，开启后缩放比例小于 optimizeZoom 时自动隐藏非 keyShape；
      optimizeZoom: 0.7 // 当 enableOptimize 为 true 时起作用，默认值为 0.7，表示当缩放到哪个比例时开始隐藏非 keyShape。
    },
    {
      type: 'drag-node', // 拖拽节点
      delegateStyle: { // 节点拖拽时的绘图属性，默认为 { strokeOpacity: 0.6, fillOpacity: 0.6 }；
        strokeOpacity: 0.6,
        fillOpacity: 0.6
      },
      updateEdge: true, // 是否在拖拽节点时更新所有与之相连的边，默认为 true
      enableDelegate: false // 拖动节点过程中是否启用 delegate，即在拖动过程中是否使用方框代替元素的直接移动，效果区别见下面两个动图。默认值为  false。
    }, {
      type: 'click-select', // 点击选中节点，再次点击节点或点击 Canvas 取消选中状态；
      multiple: true, // 是否允许多选，默认为 true，当设置为 false，表示不允许多选，此时 trigger 参数无效。
      trigger: 'shift' // 指定按住哪个键进行多选，默认为 shift，按住 Shift 键多选，用户可配置 shift、ctrl、alt；
    },
    {
      type: 'tooltip', // 节点文本提示；
      formatText(model) { // 格式化函数，可以返回文本或者 HTML；
        return model.id
      },
      offset: 0 // tooltip 距离鼠标的偏移量。
      // css样式
      // 提示：由于 G6 没有内置任何 tooltip 的样式，用户需要自己定义样式，例如：
      // .g6-tooltip {
      //   padding: 10px 6px;
      //   color: #444;
      //   background-color: rgba(255, 255, 255, 0.9);
      //   border: 1px solid #e2e2e2;
      //   border-radius: 4px;
      // }
    }, {
      type: 'edge-tooltip', // 边文本提示；
      formatText(model) { // 格式化函数，可以返回文本或者 HTML；
        return model.id
      },
      offset: 0 // tooltip 距离鼠标的偏移量。
      // 样式同上
    },
    {
      type: 'activate-relations', // 当鼠标移到某节点时，突出显示该节点以及与其直接关联的节点和连线；
      trigger: 'mouseenter', // 可以是  mousenter，表示鼠标移入时触发；也可以是  click，鼠标点
      activeState: 'active', // 活跃节点状态。当行为被触发，需要被突出显示的节点和边都会附带此状态，默认值为  active；可以与 graph 实例的  nodeStyle  和  edgeStyle  结合实现丰富的视觉效果。
      resetSelected: false, // 高亮相连节点时是否重置已经选中的节点，默认为 false，即选中的节点状态不会被 activate-relations 覆盖。
      inactiveState: 'inactive' // 非活跃节点状态。不需要被突出显示的节点和边都会附带此状态。默认值为  inactive。可以与 graph 实例的  nodeStyle  和  edgeStyle  结合实现丰富的视觉效果；
    },
    {
      type: 'brush-select', // 拖动框选节点；
      brushStyle: { // 拖动框选框的样式，包括 fill、fillOpacity、stroke 和 lineWidth 四个属性;
        fill: '#000',
        fillOpacity: 0.3,
        stroke: '#000',
        lineWidth: 1
      },
      onSelect(nodes) { // 选中节点时的回调，参数 nodes 表示选中的节点；

      },
      onDeselect(nodes) { // 取消选中节点时的回调，参数 nodes 表示取消选中的节点；

      },
      selectedState: 'selected', // 选中的状态，默认值为 'selected'；
      includeEdges: true, // 框选过程中是否选中边，默认为 true，用户配置为 false 时，则不选中边；
      trigger: 'shift' // 触发框选的动作，默认为 'shift'，即用户按住 Shift 键拖动就可以进行框选操作，可配置的的选项为: 'shift'、'ctrl' / 'control'、'alt' 和 'drag' ，不区分大小写：
      // 'shift'：按住 Shift 键进行拖动框选；
      // 'ctrl' / 'control'：按住 Ctrl 键进行拖动框选；
      // 'alt'：按住 Alt 键进行拖动框选；
      // 风险  'drag'：不需要按任何键，进行拖动框选，如果同时配置了 drag-canvas，则会与该选项冲突。
    },
    {
      type: 'collapse-expand', // 只适用于树图，展开或收起子树；
      trigger: 'click' // 收起和展开树图的方式，支持 'click' 和 'dblclick' 两种方式。默认为 'click'，即单击；
    },
    {
      type: 'collapse-expand-group', // 收起和展开群组；
      trigger: 'click' // 收起和展开节点分组的方式。支持 'click' 和 'dblclick' 两种方式。默认为 'dblclick'，即双击
    },
    {
      type: 'drag-group', // 拖动节点分组；
      delegateStyle: {} // 拖动节点分组时 delegate 的样式。
    },
    {
      type: 'drag-node-with-group', // 拖动节点分组中的节点；
      delegateStyle: {} // 拖动节点时 delegate 的样式；
    }
    ]
  }
}
export default option
